import React, { Component } from 'react'
import Axios from 'axios';

export default class sidebar extends Component {
    state = { isMv: false, mv_url: "" }
    videoRef = React.createRef();
    mvRef = React.createRef();
    getMusic_url_comment_pic = (id, e) => {
        console.log(id);
        var that = this;
        Axios.get("https://autumnfish.cn/song/url?id=" + id).then(
            function (response) {
                console.log(response);
                that.props.music_url(response.data.data[0].url)
                // that.music_url = response.data.data[0].url;
            }, function (err) {
                console.log(err);
            }
        );
        Axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(
            function (response) {
                console.log(response);
                that.props.set_comment(response.data.hotComments);
                // that.commentList=response.data.hotComments;
            }, function (err) {
                console.log(err)
            }
        );
        Axios.get("https://autumnfish.cn/song/detail?ids=" + id).then(
            function (response) {
                console.log(response)
                that.props.pic_url(response.data.songs[0].al.picUrl)
                // that.music_img=response.data.songs[0].al.picUrl;
            }, function (err) {
                console.log(err)
            }
        );
    }
    openMv = (mvid, e) => {
        // this.setState({ isMv: true });
        var that = this;
        Axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            function (response) {
                console.log(response)
                that.setState({ isMv: true, mv_url: response.data.data.url })
                // that.state.mv_url = response.data.data.url
                // that.isShowMv = true
                console.log(that.state.mv_url)
            },
            function (err) {
                console.log(err)
            }
        );
    }
    close_mv = (e) => {
        this.videoRef.current.pause()
        // console.log(this.videoRef.current)
        this.setState({ isMv: false })
    }
    move_mv = (e) => {
        let oDiv = this.mvRef.current;
        console.log('onmousedown')
        // 算出鼠标相对元素的位置
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;

        document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';

        };

        document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
    render() {
        const { songList } = this.props
        var arrList = []
        if (songList != null && songList.songs != null)
            arrList = songList.songs;
        return (
            <div className="sidebar">
                <ul className="uul">
                    {
                        arrList.map((item, index) =>
                            <li key={item.id} onClick={(e) => this.getMusic_url_comment_pic(item.id, e)}>{index + 1}.&nbsp;{item.name}——{item.artists[0].name}&nbsp;&nbsp;
                                <div className={`mv ${item.mvid > 0 ? "active" : "inactive"}`} onClick={(e) => this.openMv(item.mvid, e)}>mv</div></li>
                        )
                    }
                    <li>测试内容1</li>
                    <li>测试内容2</li>
                </ul>
                <div className={`mvideo ${this.state.isMv === true ? "active" : "inactive"}`} onMouseDown={this.move_mv} ref={this.mvRef}>
                    <div className="mvideo_head">
                        <div className="mvideo_close" onClick={this.close_mv}>关闭</div>
                    </div>
                    <video style={{ width: '100%', height: '400px', backgroundColor: 'black' }} src={this.state.mv_url} ref={this.videoRef} controls="controls"></video>
                </div>
            </div>
        )
    }
}
